<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动画操作</title>
		<script src="js/jquery-1.11.1.js"></script>
		<!-- 动画操作 针对页面弹出效果
		 show() 显示效果
		 hide() 隐藏效果
		 
		 slideDown() 向下效果
		 slideUp     向下效果
		 
		 fadeIn() 
		 fadeOut()         淡入效果
		 fadeOut（）      淡出效果
		 
		 hover()    悬停切换效果
		 -->
		 <style>
			 div{
				 width: 12.5rem;
				 height: 12.5rem;
				 background-color: #55ff00;
			 }
		 </style>
	</head>
	<body>
		<script>
			<botton id="show">显示</botton>
			<botton id="hide">隐藏</botton>
			<botton id="sd">向下</botton>
			<botton id="su">向上</botton>
			<botton id="fi">淡入</botton>
			<botton id="fo">淡出</botton>
			// 1.显示和隐藏效果
			$("#show").click(function(){
				$(div).show();
			});
			
			$("#hide").click(function(){
				$(div).hide();
			});
			
			$("#sd").click(function(){
				$(div).slideDown();
			});
			
			$("#su").click(function(){
				$(div).slideUp();
			});
			
			$("#show").click(function(){
						$(div).show();
					});
		</script>
	</body>
</html>
